<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天气应用 - 登录</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#1E88E5',
            secondary: '#64B5F6',
            accent: '#0288D1',
            light: '#E3F2FD',
            dark: '#0D47A1'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .bg-gradient-weather {
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
    }
  </style>
  
  <!-- 引入Google字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="font-inter bg-gradient-weather min-h-screen flex items-center justify-center p-4">
  <!-- 背景动画元素 -->
  <div class="fixed inset-0 overflow-hidden -z-10">
    <div class="absolute top-10 left-10 w-40 h-40 bg-primary/10 rounded-full blur-3xl"></div>
    <div class="absolute bottom-10 right-10 w-60 h-60 bg-accent/10 rounded-full blur-3xl"></div>
    <div class="absolute top-1/3 right-1/4 w-32 h-32 bg-secondary/10 rounded-full blur-2xl"></div>
  </div>

  <!-- 主内容卡片 -->
  <div class="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden card-hover">
    <!-- 卡片顶部天气图案 -->
    <div class="bg-primary text-white p-6 relative overflow-hidden">
      <div class="absolute -right-10 -top-10 w-40 h-40 bg-white/10 rounded-full"></div>
      <div class="absolute -left-5 top-5 w-20 h-20 bg-white/5 rounded-full"></div>
      
      <div class="relative z-10">
        <div class="flex items-center justify-center mb-2">
          <i class="fa fa-cloud text-4xl mr-3 animate-pulse"></i>
          <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-shadow">天气应用</h1>
        </div>
        <p class="text-center text-light/90 text-sm">登录以获取最新天气信息</p>
      </div>
      
      <!-- 天气图案装饰 -->
      <div class="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-b from-primary to-transparent"></div>
    </div>
    
    <!-- 登录表单 -->
    <div class="p-6 space-y-4">
      <form id="loginForm" class="space-y-4">
        <!-- 用户名输入 -->
        <div class="space-y-2">
          <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
          <div class="relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
              <i class="fa fa-user"></i>
            </span>
            <input type="text" id="username" name="username" 
                   class="pl-10 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200"
                   placeholder="请输入用户名" required>
          </div>
        </div>
        
        <!-- 密码输入 -->
        <div class="space-y-2">
          <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
          <div class="relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
              <i class="fa fa-lock"></i>
            </span>
            <input type="password" id="password" name="password" 
                   class="pl-10 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200"
                   placeholder="请输入密码" required>
            <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700">
              <i class="fa fa-eye-slash"></i>
            </button>
          </div>
        </div>
        
        <!-- 记住我选项 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
            <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
          </div>
          <a href="#" class="text-sm text-primary hover:text-dark transition-colors">忘记密码?</a>
        </div>
        
        <!-- 登录按钮 -->
        <button type="submit" 
                class="w-full bg-primary hover:bg-dark text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-md hover:shadow-lg">
          <i class="fa fa-sign-in mr-2"></i>登录
        </button>
      </form>
      
      <!-- 分隔线 -->
      <div class="relative flex items-center py-4">
        <div class="flex-grow border-t border-gray-200"></div>
        <span class="flex-shrink mx-4 text-gray-500 text-sm">或者</span>
        <div class="flex-grow border-t border-gray-200"></div>
      </div>
      
      <!-- 社交登录选项 -->
      <div class="grid grid-cols-3 gap-3">
        <button class="flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
          <i class="fa fa-weixin text-green-500"></i>
        </button>
        <button class="flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
          <i class="fa fa-qq text-blue-400"></i>
        </button>
        <button class="flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
          <i class="fa fa-weibo text-red-500"></i>
        </button>
      </div>
      
      <!-- 注册链接 -->
      <div class="text-center text-sm text-gray-600">
        还没有账号? <a href="#" class="text-primary hover:text-dark font-medium">立即注册</a>
      </div>
    </div>
  </div>
  
  <!-- 页脚 -->
  <div class="absolute bottom-4 text-center text-white/80 text-xs">
    <p>© 2025 天气应用 - 提供实时天气信息服务</p>
  </div>

  <!-- JavaScript -->
  <script>
    // 初始化测试用户数据（实际应用中应该从服务器获取）
    document.addEventListener('DOMContentLoaded', function() {
      // 检查是否有测试用户数据，如果没有则创建
      if (!localStorage.getItem('users')) {
        const testUsers = [
          { username: 'user1', password: 'pass123', city: '北京' },
          { username: 'user2', password: 'test456', city: '上海' }
        ];
        localStorage.setItem('users', JSON.stringify(testUsers));
      }
    });
    
    // 切换密码可见性
    document.getElementById('togglePassword').addEventListener('click', function() {
      const passwordInput = document.getElementById('password');
      const icon = this.querySelector('i');
      
      if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
      } else {
        passwordInput.type = 'password';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
      }
    });
    
    // 登录表单提交处理
    document.getElementById('loginForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      // 获取表单数据
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      const rememberMe = document.getElementById('remember-me').checked;
      
      // 验证表单
      if (!username || !password) {
        alert('请输入用户名和密码');
        return;
      }
      
      // 从localStorage获取用户数据
      const users = JSON.parse(localStorage.getItem('users') || '[]');
      const user = users.find(u => u.username === username && u.password === password);
      
      // 显示加载状态
      const submitButton = this.querySelector('button[type="submit"]');
      submitButton.disabled = true;
      submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>登录中...';
      
      // 模拟API调用延迟
      setTimeout(() => {
        // 验证用户
        if (user) {
          // 登录成功，保存用户会话
          sessionStorage.setItem('currentUser', JSON.stringify({
            username: user.username,
            city: user.city
          }));
          
          // 如果选择了记住我，保存到localStorage
          if (rememberMe) {
            localStorage.setItem('rememberedUser', username);
          } else {
            localStorage.removeItem('rememberedUser');
          }
          
          // 跳转到首页
          window.location.href = 'home.html';
        } else {
          // 登录失败
          alert('用户名或密码不正确');
          
          // 重置按钮状态
          submitButton.disabled = false;
          submitButton.innerHTML = '<i class="fa fa-sign-in mr-2"></i>登录';
        }
      }, 1500);
    });
    
    // 自动填充记住的用户名
    document.addEventListener('DOMContentLoaded', function() {
      const rememberedUser = localStorage.getItem('rememberedUser');
      if (rememberedUser) {
        document.getElementById('username').value = rememberedUser;
        document.getElementById('remember-me').checked = true;
      }
    });
  </script>
</body>
</html>